<template>
	<view class="work-container">
		<!-- info属性存取的是轮播图的数据，通过数组长度决定指示点个数 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="top-content" v-for="(item,index) in postList" :key="index" @click="tapPostD(item)">
			<view class="content-headImage">
				<view class="content-headImage-item">
					<view>
						<image src="/static/images/banner/touXiang01.png"></image>
					</view>
					<view>{{item.nickName}}</view>
					<view class="content-button">
						<view class="content-button-item" @click="handleFollowClick">
							<image src="../../../../static/images/icon/three-tap.png"></image>
						</view>
					</view>
				</view>
				<view class="content-headImage-text">
					<view>{{item.content}}</view>
				</view>
				<view class="content-Image-item" v-show="item.imgUrl">
					<image :src="item.imgUrl"></image>
				</view>
			</view>
			<view class="content-Image-item-icon">
				<view @click="actionsClick()">
					<image src="/static/images/banner/share.png"></image>
					<view>分享</view>
				</view>
				<view @click="actionsComment()">
					<image src="/static/images/banner/comment.png"></image>
					<view>评论</view>
				</view>
				<view @click="actionsCollect()">
					<image src="/static/images/banner/collect.png"></image>
				</view>
				<view @click="actionsLike()">
					<image src="/static/images/banner/ok.png"></image>
				</view>
				<!-- 		<view class="addtion-things">
					<view>	:</view>
				</view> -->
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<view>
			<uni-fab :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger"></uni-fab>
		</view>

		<!-- 点击帖子右上角三个点 -->
		<view>
			<u-modal :show="show" :title="title" :showConfirmButton="true" :showCancelButton="true" @cancel="cancel"
				@confirm="confirm">
				<view>
					<uni-data-checkbox v-model="value" :localdata="range"></uni-data-checkbox>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script setup>
	import {
		getToken
	} from '@/utils/auth' //导入token

	import {
		ref,
		onMounted,
		defineProps,
		watch
	} from "vue";
	//导入onLoad生命周期
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		listPost,
		getPost
	} from '@/api/tiezi/post'
	//多选，选框
	const range = ref([{
		text: '足球',
		value: 0
	}, {
		text: '篮球',
		value: 1
	}, {
		text: '游泳',
		value: 2
	},{
		text: '足球',
		value: 0
	},
	{
		text: '足球',
		value: 0
	},
	{
		text: '足球',
		value: 0
	}
	])
	const value = ref(0)
	//设置层级初始值
	const leState = ref(false)
	//页面加载
	onMounted(() => {

	})

	//悬浮按钮
	const pattern = ref({
		color: '#7A7E83',
		backgroundColor: '#fff',
		selectedColor: '#000000',
		buttonColor: '#007AFF',
		iconColor: '#fff'
	})

	const horizontal = ref('right')
	const direction = ref('horizontal')
	const vertical = ref('bottom')
	const content = ref([{
			iconPath: '/static/images/icon/post.png',
			selectedIconPath: '/static/images/icon/post01.png',
			text: '帖子',
			active: false
		},
		{
			iconPath: '/static/images/icon/suTitle.png',
			selectedIconPath: '/static/images/icon/suTitle01.png',
			text: '主题',
			active: false
		},
	])

	function trigger(e) {
		console.log(e, 'nidsac')
		content.value[e.index].active = !e.item.active;
		if (e.item.text == '帖子' || e.item.text == '主题') {
			uni.switchTab({
				url: '/pages/pluse/index'
			})
		}
	}
	//接口数据
	const postList = ref([])
	// //父组件数据传入子组件数据
	const props = defineProps({
		// 定义一个名为message的prop
		postData: Array
	})
	watch(props, async (newQuestion, oldQuestion) => {
		postList.value = newQuestion.postData //循环此数组
	})
	console.log(postList, '455555555555555ds')
	//点击搜索框时候触发时间跳转到页面
	function tiaoSearchpage() {
		uni.navigateTo({
			url: '/pages/searchPage/searchPage'
		})
	}
	//点击整个帖子触发,将帖子数据传给帖子详情页面
	function tapPostD(item) {
		console.log(item, '99992123')
		if (leState.value == false) {
			uni.navigateTo({
				url: '/pages/postDetail/index?data=' + JSON.stringify(item)
			})
		}

	}
	//点击三个点显示遮罩层,初始化show
	const show = ref(false)
	const title = ref('选择不喜欢理由')
	const handleFollowClick = (() => {
		show.value = true
		leState.value = true
		//设置定时器
		setTimeout(() => {
			leState.value = false
		}, 200)
	})
	const cancel = (() => {
		show.value = false
	})
	const confirm = (() => {
		show.value = false
	})
	//点击分享
	function actionsClick() {
		uni.showToast({
			title: '分享',
			icon: 'none'
		})
	}
	// //点击评论
	function actionsComment() {
		uni.showToast({
			title: '评论',
			icon: 'none'
		})
	}
	// //点击收藏
	function actionsCollect() {
		uni.showToast({
			title: '收藏',
			icon: 'none'
		})
	}
	// //点击点赞
	function actionsLike() {
		uni.showToast({
			title: '点赞',
			icon: 'none'
		})
	}
	//初始化current
	const current1 = ref(0)
	//页面跳转
	const click = ((e) => {
		current1.value = e.index
	})
	const list1 = ref([{
			name: '推荐'
		},
		{
			name: 'C/C++'
		},
		{
			name: 'Java'
		},
		{
			name: 'JavaScript'
		},
		{
			name: 'Python'
		}
	])
	const list = ref([{
			headImage: '/static/images/banner/touXiang01.png',
			name: '小陈要开心喔',
			text: '再也不嘴硬说南方比北风冷了',
			image01: '/static/images/banner/3.jpg',
			image02: '/static/images/banner/5.jpg'
		},
		{
			headImage: '/static/images/banner/touXiang01.png',
			name: '小陈要开心喔',
			text: '再也不嘴硬说南方比北风冷了',
			image01: '/static/images/banner/3.jpg',
			image02: '/static/images/banner/5.jpg'
		},
		{
			headImage: '/static/images/banner/touXiang01.png',
			name: '小陈要开心喔',
			text: '再也不嘴硬说南方比北风冷了',
			image01: '/static/images/banner/3.jpg',
			image02: '/static/images/banner/5.jpg'
		},
		{
			headImage: '/static/images/banner/touXiang01.png',
			name: '小陈要开心喔',
			text: '再也不嘴硬说南方比北风冷了',
			image01: '/static/images/banner/3.jpg',
			image02: '/static/images/banner/5.jpg'
		},
		{
			headImage: '/static/images/banner/touXiang01.png',
			name: '小陈要开心喔',
			text: '再也不嘴硬说南方比北风冷了',
			image01: '/static/images/banner/3.jpg',
			image02: '/static/images/banner/5.jpg'
		}
	])
	// console.log(typeof list,'1111')
	const current = ref(0);
	const swiperDotIndex = ref(0);
	//轮播图
	const data = ref([{
			image: '/static/images/banner/banner01.jpg'
		},
		{
			image: '/static/images/banner/banner02.jpg'
		},
		{
			image: '/static/images/banner/banner03.jpg'
		}
	]);


	function clickBannerItem(item) {
		console.info(item)
	};

	function changeSwiper(e) {
		current.value = e.detail.current
	}
</script>

<style lang="scss" scoped>
	.search {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		pointer-events: auto;

	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 410px) {
		.uni-swiper-dot-box {
			border-radius: 40rpx;
			width: 100%;
			margin: 0 auto;
			margin-top: 16rpx;
		}

		.image {
			width: 100%;
		}
	}

	.top-content {
		margin: 15rpx;
		background-color: #f1f1f1;
		border-radius: 15rpx;

		// background-color: red;
		.content-headImage {
			padding: 20rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.content-button {
					display: flex;
					align-items: center;
				}

				.content-button-item {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}

				.popup-delect {
					position: absolute;
					right: 0rpx;
					font-size: 30rpx;
				}
			}

			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text view:nth-child(1) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.content-Image-item {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				image {
					border-radius: 10rpx;
					width: 300rpx;
					height: 300rpx;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			text-align: center;

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}

		.content-Image-item-icon view:nth-child(1) {
			display: flex;
			margin-left: 80rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(2) {
			display: flex;
			margin-left: 100rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(3) {
			// flex: 1;
			margin-left: 100rpx;
		}

		.content-Image-item-icon view:nth-child(4) {
			// flex: 1;
			margin-left: 100rpx;
		}
	}
</style>